@page "/Devices/Details/{id:int}"
@model NetworkFlowMonitor.Pages.Devices.DetailsModel
@{
    ViewData["Title"] = "设备详情";
}

<h1>设备详情</h1>

<div>
    <h4>设备信息</h4>
    <hr />
    <dl class="row">
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Device.MacAddress)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Device.MacAddress)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Device.IpAddress)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Device.IpAddress)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Device.DeviceName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Device.DeviceName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Device.FirstSeen)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Device.FirstSeen)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Device.LastSeen)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Device.LastSeen)
        </dd>
         
    </dl>
</div>

<div>
    <h4>当前连接</h4>
    <hr />
    <table class="table">
        <thead>
            <tr>
                <th>源地址（包含接口）</th>
                <th>目标地址（包含接口）</th>
                <th>地址URL</th>
                <th>速率</th>
                <th>下载量</th>
                <th>上传量</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var connection in Model.Connections)
            {
                <tr>
                    <td>@connection.SourceIp</td>
                    <td>@connection.DestinationIp</td>
                    <td>@connection.Protocol</td>
                    @* <td>@connection.Rate</td> *@
                    @* <td>@connection.Download</td> *@
                    @* <td>@connection.Upload</td> *@
                </tr>
            }
        </tbody>
    </table>
</div>

<div>
    <h4>流量历史</h4>
    <hr />
    <table class="table">
        <thead>
            <tr>
                <th>时间戳</th>
                <th>下载流量</th>
                <th>上传流量</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.TrafficRecords)
            {
                <tr>
                    <td>@item.Timestamp</td>
                    <td>@item.BytesReceived</td>
                    <td>@item.BytesSent</td>
                </tr>
            }
        </tbody>
    </table>
</div>

<div>
    <a asp-page="./Index">返回设备列表</a>
</div>